<script lang="ts">
  import {
    update_node_content,
    type ExDrawNodeInfo,
  } from "$lib/api/board/board_draw";
  import { get_user_session } from "$lib/api/user";
  import { request } from "$lib/utils/request";
  import { Modal } from "@skeletonlabs/skeleton-svelte";
  import { drawStore } from "../../store.svelte";
  import { X } from "lucide-svelte";

  interface ModalProps {
    node: ExDrawNodeInfo;
    onClose: () => void;
  }
  let props: ModalProps = $props();

  let text = $state("");
  let fontSize = $state("");
  let fontWeight = $state("");

  let hasChange = $derived(() => {
    let oldText = "";
    let oldFontSize = "";
    let oldFontWeight = "";
    if (props.node.content.TextContent != undefined) {
      oldText = props.node.content.TextContent.text;
      oldFontSize = props.node.content.TextContent.font_size;
      oldFontWeight = props.node.content.TextContent.font_weight;
    } else if (props.node.content.BasicRectangleContent != undefined) {
      oldText = props.node.content.BasicRectangleContent.text;
      oldFontSize = props.node.content.BasicRectangleContent.font_size;
      oldFontWeight = props.node.content.BasicRectangleContent.font_weight;
    } else if (props.node.content.BasicEllipseContent != undefined) {
      oldText = props.node.content.BasicEllipseContent.text;
      oldFontSize = props.node.content.BasicEllipseContent.font_size;
      oldFontWeight = props.node.content.BasicEllipseContent.font_weight;
    }
    return (
      text != oldText || fontSize != oldFontSize || fontWeight != oldFontWeight
    );
  });

  function reset() {
    if (props.node.content.TextContent != undefined) {
      text = props.node.content.TextContent.text;
      fontSize = props.node.content.TextContent.font_size;
      fontWeight = props.node.content.TextContent.font_weight;
    } else if (props.node.content.BasicRectangleContent != undefined) {
      text = props.node.content.BasicRectangleContent.text;
      fontSize = props.node.content.BasicRectangleContent.font_size;
      fontWeight = props.node.content.BasicRectangleContent.font_weight;
    } else if (props.node.content.BasicEllipseContent != undefined) {
      text = props.node.content.BasicEllipseContent.text;
      fontSize = props.node.content.BasicEllipseContent.font_size;
      fontWeight = props.node.content.BasicEllipseContent.font_weight;
    }
  }

  async function updateContent() {
    const content = { ...props.node.content };
    if (content.TextContent != undefined) {
      content.TextContent.text = text;
      content.TextContent.font_size = fontSize;
      content.TextContent.font_weight = fontWeight;
    } else if (content.BasicRectangleContent != undefined) {
      content.BasicRectangleContent.text = text;
      content.BasicRectangleContent.font_size = fontSize;
      content.BasicRectangleContent.font_weight = fontWeight;
    } else if (content.BasicEllipseContent != undefined) {
      content.BasicEllipseContent.text = text;
      content.BasicEllipseContent.font_size = fontSize;
      content.BasicEllipseContent.font_weight = fontWeight;
    }
    const sessionId = await get_user_session();
    await request(
      update_node_content({
        session_id: sessionId,
        board_id: drawStore.boardInfo?.board_id ?? "",
        draw_id: drawStore.drawId,
        node_id: props.node.node_id,
        content: content,
      }),
    );
    props.onClose();
  }

  $effect(() => {
    if (props.node.content != undefined) {
      reset();
    }
  });
</script>

<Modal
  open={true}
  triggerBase="btn preset-tonal"
  contentBase="card bg-surface-200-800 p-4 space-y-4 shadow-xl shadow-surface-500 w-[600px]"
  backdropBase="backdrop-none"
  closeOnEscape={false}
  closeOnInteractOutside={false}
  onOpenChange={(ev) => {
    if (!ev.open) {
      props.onClose();
    }
  }}
>
  {#snippet content()}
    <header class="flex justify-between">
      <h4 class="h4">修改节点内容</h4>
      <button
        type="button"
        class="btn preset-ghost-primary-500"
        onclick={() => props.onClose()}
      >
        <X />
      </button>
    </header>

    <main class="pt-0 pl-2 pr-2">
      <label class="label">
        <span class="label-text">文本</span>
        <textarea
          class="textarea bg-surface-100-900"
          rows="4"
          placeholder="请输入文本内容"
          bind:value={text}
        ></textarea>
      </label>
      <label class="label">
        <span class="label-text">字体大小</span>
        <select
          class="select rounded-none bg-surface-100-900"
          bind:value={fontSize}
        >
          <option value="text-xs">0.75</option>
          <option value="text-base">1.0</option>
          <option value="text-xl">1.25</option>
          <option value="text-2xl">1.5</option>
          <option value="text-4xl">2.25</option>
          <option value="text-5xl">3.0</option>
        </select>
      </label>
      <label class="label">
        <span class="label-text">字体粗细</span>
        <select
          class="select rounded-none bg-surface-100-900"
          bind:value={fontWeight}
        >
          <option value="font-thin">最细</option>
          <option value="font-light">较细</option>
          <option value="font-medium">正常</option>
          <option value="font-bold">较粗</option>
          <option value="font-black">最粗</option>
        </select>
      </label>
    </main>

    <footer class="flex justify-end gap-4 m-[10px]">
      <button
        type="button"
        class="btn preset-tonal"
        onclick={() => props.onClose()}>取消</button
      >
      <button
        type="button"
        class="btn preset-filled-primary-900-100"
        disabled={text.trim() == "" || !hasChange}
        onclick={() => updateContent()}
      >
        保存
      </button>
    </footer>
  {/snippet}
</Modal>
